<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .red {
      color: red;
    }

    .blue {
      color: blue;
    }

    .text-danger {
      background: yellow;
    }

    .red-bg{
      background: red;
    }
  </style>
</head>
<body>

<div id="app">
<!--  <h1 :class="`${cname} bg`">{{ msg }}</h1>-->
<!--  <h1 :class="cname" class="bg">{{ msg }}</h1>-->
<!--  <h1 :class="{ red: isRed, 'text-danger': hasError }">{{ msg }}</h1>-->
<!--  <h1 :class="classObject">{{ msg }}</h1>-->
<!--  <h1 :class="[activeClass, errorClass]">{{ msg }}</h1>-->
<!--  <h1 :class="[isRed ? activeClass : '', errorClass]">{{ msg }}</h1>-->

<!--  <h1 :style="`color: ${ msgColor }; background: yellow`">{{ msg }}</h1>-->
<!--  <h1 :style="{ color: msgColor, backgroundColor: bgColor }">{{ msg }}</h1>-->
<!--  <h1 :style="[ isRed ? arrSty1 : { background: 'red' }, arrSty2 ]">{{ msg }}</h1>-->

  <!--
  <div :style="{ display: ['-webkit-box', '-ms-flexbox'] }">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>-->

  <button
    v-for="(item, index) of tabData"
    :class="[activeIndex === index ? 'red-bg' : '']"
    @click="handleClick(index)"
  >
    {{item}}
  </button>
<!--  <button>按钮二</button>-->
<!--  <button>按钮三</button>-->
<!--  <button>按钮四</button>-->

  <button @click="isRed = !isRed">change color</button>
</div>

<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
